<template>
	<view>
		<view class="home-tab">
			<scroll-view id="nav-bar" class="nav-bar" scroll-x scroll-with-animation :scroll-left="scrollLeft">
				<view v-for="(item,index) in tabList" :key="item.id" class="nav-item" :class="{current: index === tabCurrentIndex}"
				 :id="'tab'+index" @click="changeTab(index)">{{item.name}}</view>
			</scroll-view>
		</view>
		<mescroll-uni :down="downOption" @down="downCallback" :marginTop="top">
		<swiper :current="tabCurrentIndex" duration="300" @change="swiperChange" style="height: calc(100vh - 90rpx);">
			<swiper-item v-for="(it,index) in tabList" :key="index" class="artList">
					<scroll-view class="homeList" scroll-y style="height: calc(100vh - 90rpx);" @scrolltolower="loadMore" v-if="!isEmpty">
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType !==3" @click="checkDetail(item.houseId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.houseName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}} |{{item.areaName}} |{{item.buildNum}}栋{{item.roomNum}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips-1':labIndex == 0,'tips-2':labIndex == 1,'tips-3':labIndex == 2}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price" v-if="houseType == 2"><text>{{item.price}}万({{item.acreage}}m²|{{item.unitPrice}}元/m²)</text></view>
								<view class="home-price" v-if="houseType == 1">
									<text>{{ item.rental }}元/月({{ item.acreage }}m²)</text>
								</view>
							</view>
						</view>
						<view class="home-info" v-for="(item,index) in homeList" :key="index" v-if="houseType ==3" @click="checkDetail(item.areaId)">
							<view class="home-pic">
								<image :src="item.picUrl[0]" lazy-load="true"></image>
							</view>
							<view class="home-detail">
								<view class="homeName"><text>{{item.areaName}}</text></view>
								<view class="home-address"><text space="nbsp">{{item.provinceString}}</text></view>
								<view class="home-tips">
									<view :class="[{'tips4':labIndex == 0,'tips5':labIndex !== 0}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
								</view>
								<view class="home-price"><text>{{item.price}}元/m²(楼盘均价)</text></view>
							</view>
						</view>
						<!-- 加载 -->
						<uni-load-more :status="status" :contentText="contentText"></uni-load-more>	
					</scroll-view>
					<view v-if="isEmpty" class="noData">
						<view class="nodata-img">
							<image src="../../static/icon/nodata.png" mode=""></image>
						</view>
						<view class="nodata-content"><text>暂无数据哦～</text></view>
					</view>
			</swiper-item>
		</swiper>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'		
	export default {
		name:'myRecord',
		components:{
			MescrollUni,uniLoadMore
		},
		data(){
			return{
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				tabList:[
					{id:1,name:'二手房'},
					{id:2,name:'新房'},
					{id:3,name:'租房'},
				],
				tabCurrentIndex: 0,
				homeList:[],
				page:0,
				houseType:2,
				type:'',
				hasFlag:true,
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				top:'90rpx',
				isEmpty:false
			}
		},
		methods:{
			// 点击选项卡
			changeTab(index){
				if(this.tabCurrentIndex !== index){
					this.tabCurrentIndex = index
				}
			},
			// 滑动切换
			swiperChange(e) {
				this.tabCurrentIndex = e.target.current;
				if(this.tabCurrentIndex == 0){
					this.houseType = 2
				}else if(this.tabCurrentIndex == 1){
					this.houseType = 3
				}else{
					this.houseType = 1
				}
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getCollectList();
			},
			// 获取收藏,浏览记录
			async getCollectList(){
				if (!this.hasFlag) return // 说明已经没有更多
				this.page = ++this.page
				let res = await this.$fetch(this.$api.collectList,{pageNum:this.page,pageSize:10,houseType:this.houseType,type:this.type},'GET')
				console.log(res);
				if(res.total){
					this.isEmpty = false
				}else{
					this.isEmpty = true
				}
				this.hasFlag = 10*this.page < res.total
				if(!this.hasFlag){
					this.status = 'noMore'
				}
				if(this.houseType != 3){
					res.rows.forEach(item =>{
						if(item.oldHouse.picUrl){
							item.oldHouse.picUrl = item.oldHouse.picUrl.split(',')
						}
						if(item.oldHouse.label){
							item.oldHouse.label = item.oldHouse.label.split(',')						
						}
						this.homeList.push(item.oldHouse)
					})
				}else{
					res.rows.forEach(item =>{
						if(item.newArea.picUrl){
							item.newArea.picUrl = item.newArea.picUrl.split(',')						
						}
						if(item.newArea.label){
							item.newArea.label = item.newArea.label.split(',')					
						}
						this.homeList.push(item.newArea)
					})
				}
			},
			// 加载更多
			loadMore(){
				if(this.hasFlag){
					this.getCollectList()
				}else{
					this.status = 'noMore'
				}
			},
			// 下拉刷新
			downCallback(mescroll){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getCollectList();
				mescroll.endSuccess();
			},
			// 查看房源详情
			checkDetail(id){
				if(this.houseType == 2){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=2'
					})
				}else if(this.houseType == 1){
					uni.navigateTo({
						url:'../oldHouse/oldHouse?houseId='+id+'&houseType=1'
					})
				}else if(this.houseType == 3){
					uni.navigateTo({
						url:'../newHouse/newHouse?houseId='+id+'&houseType=3'
					})
				}
			}
		},
		onLoad(options) {
			this.type = options.type
			if(this.type == 0){
				uni.setNavigationBarTitle({
					title:'浏览记录'
				})
			}else{
				uni.setNavigationBarTitle({
					title:'我的收藏'
				})
			}
		},
		onShow() {
			this.getCollectList()
		}
	}
</script>

<style lang="less">
	.home-tab{
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		position: relative;
		z-index: 10;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
	}
	.nav-bar{
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		background-color: #fff;
		
		.nav-item {
			display: inline-block;
			width: 250upx;
			height: 90upx;
			text-align: center;
			line-height: 90upx;
			font-size: 28upx;
			color: #A6A6A6;
			position: relative;
		
			&:after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 6upx solid #874A98;
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				transition: .3s;
			}
		}
		
		.current {
			color: #874A98;
			font-size: 28upx;
			font-weight: bold;
		
			&:after {
				width: 30%;
			}
		}
	}
	.artList{
		width: 100%;
		background: #FFFFFF;
	}
    .homeList {
		width: 100%;
		background: #FFFFFF;
		// margin-top:266rpx;
		.home-info {
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
			// padding-top: 40rpx;
			height: 250rpx;
			// padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}
	}
	
	.home-pic {
		width: 240rpx;
		height: 180rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
		border-radius: 4rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('');
	}
	
	.home-pic image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}
	
	.home-detail {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
	
		.homeName {
			width: 420rpx;
			font-size: 28rpx;
			color: #5B5B5B;
			text-align: justify;
			letter-spacing: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: bold;
		}
	
		.home-address {
			width: 420rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			letter-spacing: 0;
			text-align: justify;
			margin-top: 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	
		.home-tips {
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
	
			.tips-1 {
				background: rgba(241, 78, 44, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #F14E2C;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-2 {
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-3 {
				background: rgba(211, 160, 221, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #800080;
				letter-spacing: 0;
				text-align: justify;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips4{
				background: #48D2AB;
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
			
			.tips5{
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
		}
	
		.home-price {
			font-size: 28rpx;
			color: #FE9E2E;
			letter-spacing: 0;
			text-align: justify;
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
	
	.tips-1 text {
		margin: 0 10rpx;
	}
	
	.tips-2 text {
		margin: 0 10rpx;
	}
	
	.tips-3 text {
		margin: 0 10rpx;
	}
	.tips4 text{
		margin: 0 10rpx;
	}
	.tips5 text{
		margin: 0 10rpx;
	}
	.noData{
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.nodata-img{
			width: 100%;
			height: 325.6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			
			image{
				width: 300rpx;
				height: 325.6rpx;
			}
		}
		
		.nodata-content{
			width: 100%;
			margin-top: 40.4rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			text-align: center;
		}
	}	
</style>
